<template>
	<!-- 复用组件  -->
	<view class="card">
		<view class="cardTitles">{{sectionDto.sectionName}}</view>
		<view class="cardList">
			<view @click="todetail(item)"   class="cardItem" v-for="(item,index) in sectionDto.elementDtoList" :key="item.id">
				<image class="cardItemImg" :src="item.photoUrl" mode=""></image>
				<view class="cardItemRecommend">{{item.name}}</view>
				<view class="price">￥{{item.price}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:["sectionDto"],
		data(){
			return{
				
			}
		},
		methods:{
			todetail(item){
				const itemdetail = [item.yktCourseCardv,item.photoUrl]
				wx.navigateTo({
					url:"/pages/detail/detail",
					success:(res)=>{
						res.eventChannel.emit('acceptDataFromOpenerPage', { data: itemdetail })
					}
				})
			}
		}
	}
</script>

<style lang="stylus">
.card
	height 1000rpx
	background-color #FFFFFF
	padding 30rpx
	margin-bottom 40rpx
	.cardTitles
		font-weight 600
		margin-bottom 30rpx
		height 42rpx
	.cardList
		display flex
		flex-wrap wrap
		.cardItem
			box-sizing border-box
			width 50%
			padding 10rpx
			.cardItemImg
				width 100%
				height 190rpx
			.cardItemRecommend
				margin-top 15rpx
				font-size 28rpx
				white-space nowrap
				text-overflow ellipsis
				overflow hidden
			.price
				color red
				font-size 28rpx
				height 30rpx
</style>
